<template>
<a-layout>
    <a-layout-content :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }">
    <a-space>
        <strong>省份：</strong
        ><a-select
            v-model:value="volQueryCond.province"
            style="width: 120px"
            :options="provinceOptions"
        >
        </a-select>
        <strong>是否985：</strong>
        <a-radio-group :options="radioOptions" v-model:value="volQueryCond.is_985"></a-radio-group>
        <strong>是否211：</strong>
        <a-radio-group :options="radioOptions" v-model:value="volQueryCond.is_211"></a-radio-group>
        <strong>最低分数：</strong>
        <a-input-number id="low-score" v-model:value="volQueryCond.low_score" :min="0"/>
        <strong>最高分数：</strong>
        <a-input-number id="high-score" v-model:value="volQueryCond.high_score" :min="0"/>
        <strong>专业名称</strong>
        <a-input v-model:value="volQueryCond.major" placeholder="Basic usage" />
        <a-button type="primary" shape="circle" @click="handleQueryVolunteers">
            <template #icon><SearchOutlined /></template>
        </a-button>
    </a-space>

    <a-table :columns="columns" :data-source="volunteers">
    </a-table>

    </a-layout-content>
</a-layout>
</template>

<script lang="ts">
import {defineComponent, onMounted, ref} from 'vue'
import axios from 'axios';


const radioOptions = [
    { label: '是', value: 1 },
    { label: '否', value: 0 },
    { label: '均可', value: null },
]

const columns = [
    {
        title: '学校名称',
        dataIndex: 'schoolName',
        key: 'schoolName',
    },
    { 
        title: '大学代码',
        dataIndex: 'uCode',
        key: 'uCode',
    },
    { 
        title: '省份',
        dataIndex: 'province',
        key: 'province',
    },
    { 
        title: '是否为 985/211',
        dataIndex: 'tags',
        key: 'tags',
        slots: { customRender: 'tags' },
    },
    { 
        title: '专业',
        dataIndex: 'major',
        key: 'major',
    },
    { 
        title: '最低录取分',
        dataIndex: 'lowScore',
        key: 'lowScore',
    },
    { 
        title: 'Action',
        key: 'action',
        slots: { customRender: 'action' },
    }
]

export default defineComponent({
    name: 'VolSubmit',

    setup() {
        const volQueryCond = ref({});

        const provinceOptions = ref();

        const volunteers = ref();

        const handleQueryProvince = () => {
            axios.get('/api/vol/province_list')
                .then((response) => {
                    const respData = response.data;
                    const revProvinces = respData.data;
                    if (respData.code === 0) {
                        const provinces = [];
                        for (let i = 0; i < revProvinces.length; i++) {
                            const p = revProvinces[i];
                            provinces.push({'value': p.name})
                        }
                        provinceOptions.value = provinces;
                    }
                })
        };

        const printCond = () => {
            console.log(volQueryCond.value);
        }

        const handleQueryVolunteers = () => {
            axios.post('/api/vol/cond_query', volQueryCond.value)
                .then((response) => {
                    const respData = response.data;
                    const revVolunteers = respData.data;
                    if (respData.code === 0) {
                        const localVolunteers = [];
                        for (let i = 0; i < revVolunteers.length; i++) {
                            const v = revVolunteers[i];
                            const tags = [];
                            if (v.is_985 === 1) tags.push('985');
                            if (v.is_211 === 1) tags.push('211');
                            localVolunteers.push({
                                'schoolName': v.name,
                                'uCode': v.university_code,
                                'province': v.province,
                                'tags': tags,
                                'major': v.major,
                                'lowScore': v.lowest_score,
                            });
                        }
                        volunteers.value = localVolunteers;
                        console.log(volunteers.value);
                    }
                })
        }

        onMounted(() => {
            handleQueryProvince();
        });

        return {
            volQueryCond,
            provinceOptions,
            radioOptions,
            printCond,
            columns,
            volunteers,

            handleQueryVolunteers,
        }
    }
})
</script>